var OrderSelect = function () {
  var template = /*html*/ `
    <div class="order-select">
      <el-input class="show-input" v-popover:orderSelectPopover v-model="showValue" @input="filterOption">
        <i slot="suffix" class="el-input__icon el-icon-arrow-up" :class="{isOpen:isShow}"></i>
      </el-input>
      <el-popover v-model="isShow" ref="orderSelectPopover" placement="bottom-start" trigger="click" 
        :visible-arrow="true" @after-leave="popoverClosed" @hide="popoverClose" @show="popoverShow">
        <div v-if="showOptions.length!==0" class="order-select-popover">
          <div class="order-select-item" :class="{'select':checkIsSelect(option)}" v-for="option in showOptions" :key="'option_'+option.orderId">
            <span style="width:145px;" @click="select(option,'orderId')">{{option.orderId}}</span>
            <span style="min-width:145px;margin-left:10px;" @click="select(option,'companyOrderId')">{{option.companyOrderId}}</span>
            <span style="min-width:100px;margin-left:10px;" @click="select(option,'factoryId')">{{option.factoryId}}</span>
            <span style="min-width:50px;margin-left:10px;" @click="select(option,'customerId')">{{option.customerId}}</span>
          </div>
        </div>
        <div v-else class="order-select-popover" style="text-align:center;">
          <span v-if="options.length===0">
            无数据
          </span>
          <span v-else>
            无匹配数据
          </span>
        </div>
      </el-popover>
    </div>
  `;

  return {
    props: {
      options: {
        type: Array,
        default: []
      },
      value: {
        type: String,
        required: true
      },
      valueField: {
        type: String,
        defualt: "id"
      },
      selectOption:{
        type:Object,
        default:null
      }
    },
    watch: {
      options: function () {
        this.showOptions = this.options;
      },
      value: function () {
        this.showValue = this.value;
        this.label = this.value;
      }
    },
    data: function () {
      return {
        showValue: this.value,
        label: this.value,
        showOptions: this.options,
        isShow: false
      };
    },
    methods: {
      checkIsSelect: function (option) {
        var selectOption = this.selectOption;
        if (selectOption === null) {
          return false;
        }

        var valueField = this.valueField;
        return option[valueField] === selectOption[valueField];
      },

      select: function (option, field) {
        var value = option[field];
        if (value === null) {
          return;
        }

        value = value.trim();
        if (value === '' || value === '无') {
          return;
        }

        if (this.checkIsSelect(option)) {
          this.showValue = value;
          this.label = value;
          this.isShow = false;
          return;
        }

        this.showValue = value;
        this.label = value;
        this.$emit('update:selectOption',option);
        this.isShow = false;
        this.$emit('input', value);
        this.$emit('change', option, value);
      },

      filterOption: function () {
        var query = this.showValue;
        var options = this.options;
        if (query === '') {
          this.showOptions = options;
          return;
        }

        query = query.toLowerCase();
        var filterParams = ['orderId', 'companyOrderId', 'factoryId', 'customerId'];
        var showOptions = _.filter(options, function (option) {
          for (var i = 0; i < filterParams.length; i++) {
            var filterParam = filterParams[i];
            var value = _.get(option, filterParam, '');
            if (value === null) {
              value = '';
            }
            if (typeof value === 'string') {
              value = value.toLowerCase();
            }
            if (value.indexOf(query) !== -1) {
              return true;
            }
          }
          return false;
        });
        this.showOptions = showOptions;
      },

      popoverShow:function(){
        this.$nextTick(function () {
          var $select = $('.el-popover .order-select-popover .order-select-item.select');
          if ($select.length > 0){
            var position = $select.prev().prev().prev().position();
            if (position !== undefined){
              var top = position.top;
              if (top < 20){
                top = 0;
              }
              $('.el-popover .order-select-popover').scrollTop(top);
            }
          }
        });
      },

      popoverClose: function () {
        var showValue = this.showValue;
        var label = this.label;
        if (showValue !== label) {
          this.showValue = this.label;
        }
      },

      popoverClosed: function () {
        this.showOptions = this.options;
      }
    },
    template: template
  };
}();